<template>
    <span>
        <el-form-item label="省份:" v-if="type === 1">
            <el-select v-model="province" filterable placeholder="请选择" :class="itemClass" @change="loadCity">
                <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item.id">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.pinyin }}</span>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="城市:" v-if="type >= 1">
            <el-select v-model="city" filterable placeholder="请选择" :class="itemClass" @change="loadDistrict">
                <el-option v-for="item in citys" :key="item.id" :label="item.name" :value="item.id">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.pinyin }}</span>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="区县:" v-if="type >= 1">
            <el-select v-model="district" filterable placeholder="请选择" :class="itemClass">
                <el-option v-for="item in districts" :key="item.id" :label="item.name" :value="item.id">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.pinyin }}</span>
                </el-option>
            </el-select>
        </el-form-item>
    </span>
</template>

<script>
    import {areaList} from '@/api/base/area'

    export default {
        name: "AreaSelect",
        props: {
            type: {
                type: [Number],
                default: 1
            },
            itemClass: {
                type: [String],
                default: ''
            },
        },
        data() {
            return {
                provinces: [{id: -1, name: "全部", pinyin: ""}],
                citys: [{id: -1, name: "全部", pinyin: ""}],
                districts: [{id: -1, name: "全部", pinyin: ""}],
                province: -1,
                city: -1,
                district: -1,
            }
        },
        mounted() {
            if (this.type === 1) {
                this.loadProvince()
            } else if (this.type === 2) {
                this.loadCity()
            }
        },
        methods: {
            async loadProvince() {
                let res = await areaList(1);
                res.data.splice(0, 0, {id: -1, name: "全部", pinyin: ""})
                this.provinces = res.data
                this.province = -1
                this.city = -1
                this.district = -1
            },
            async loadCity() {
                if (this.type === 1 && this.province === -1) {
                    return this.citys = [{id: -1, name: "全部", pinyin: ""}]
                }
                let res = await areaList(2, this.type === 1 ? this.province : null);
                res.data.splice(0, 0, {id: -1, name: "全部", pinyin: ""})
                this.citys = res.data
                this.city = -1
                this.district = -1
            },
            async loadDistrict() {
                if (this.city === -1) {
                    return this.districts = [{id: -1, name: "全部", pinyin: ""}]
                }
                let res = await areaList(3, this.city);
                res.data.splice(0, 0, {id: -1, name: "全部", pinyin: ""})
                this.districts = res.data
                this.district = -1
            },
            getArea() {
                return {
                    province: this.provinces.find(item => {
                        return item.id === this.province
                    }),
                    city: this.citys.find(item => {
                        return item.id === this.city
                    }),
                    district: this.districts.find(item => {
                        return item.id === this.district
                    })
                }
            }
        }
    }
</script>

<style scoped>

</style>